<template>
  <div class="nav">
        <el-dropdown class="user-info">
            <span class="admin-name">
                <img class="head-picture" :src="userInfo.headPicture" alt="">
                <span class="user-name">{{ userInfo.nickname }}</span>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item @click="userLogOut">退出登录</el-dropdown-item>
                    <el-dropdown-item>个人信息</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
  </div>
</template>

<script>
export default {
    name:"HeadNav",
    props:['userInfo','userLogOut']
}
</script>

<style scoped>
.user-info{
    float: right;
}
.nav{
    /* 百分百减去220像素 */
    width: calc(100% - 220px);
    height: 50px;
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
}
.admin-name{
    float: right;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    font-size: 14px;
    color: #333;
    margin-right: 50px;
}
.head-picture{
    height: 40px;
    border-radius: 50%;
    vertical-align: middle;
}
</style>